
$(function(){
    loadFilterArticle(1);
});


function loadFilterArticle(pageNumber){
    $.ajax({
        url:'/api/article/lifeList',
        type:'post',
        data:{
            pageNumber:pageNumber,
            pageSize:10,
        },
        success:function(resp){
            $(".blog-main").html("");
            $(".blog-main").data("totalPage",resp.totalPage);
            for(var i in resp.rows){
                $(".blog-main").append(getArticleHtml(resp.rows[i]));
            }
            var pageLi='';
            var start=resp.pageNum-2;
            if(start<=0)start=1;
            for(var j=start;j<start+5&&j<=resp.totalPage;j++){
                if(j==resp.pageNum){
                    pageLi+='<li class="active"><a onclick="loadFilterArticle('+j+')">'+j+'</a></li>';
                }else{
                    pageLi+='<li><a onclick="loadFilterArticle('+j+')">'+j+'</a></li>';
                }
            }
            $(".blog-main").append('<div>' +
                '<ul class="pagination">' +
                '<li><a onclick="loadFilterArticle(1)">首页</a></li>' +
                pageLi
                +'<li><a onclick="loadFilterArticle('+resp.totalPage+')">末页</a></li>'
                +'<li><a>共'+resp.totalPage+'页</a></li>' +
                '<li class="col-sm-3"><input name="pageNumber" class="form-control pull-left" type="text" placeholder="跳转页码"></li>' +
                '<li><button  onclick="jumpPage()" class="btn btn-default"><i class="fa fa-mail-forward"></i></button></li>'+
                '</ul></div>');
            showAllCommentCount();
        }
    });
}
function jumpPage(){
    var pageNumer=$("input[name='pageNumber']").val();
    if(isNaN(pageNumer)||pageNumer<1||pageNumer>$(".blog-main").data("totalPage")){
        toastr.error("请输入正确页码！");
        return;
    }
    loadFilterArticle(pageNumer);
}

function getArticleHtml(article){
    tagsHtml='';
    for(var i in article.tags){
        var tag=article.tags[i];
        tagsHtml+='<a class="tag-'+tag.id%5+'" href="/list.html?tagId='+tag.id+'" title="'+tag.description+'">\n' +
            '                <i class="fa fa-tag"></i>'+tag.name+'</a>';
    }
    return '<article class="fade-in">' +
        '<figure class="thumbnail">' +
        '<a href="/article/'+article.id+'.html">' +
        '' +
        '<img width="150" height="150" src="'+article.coverImage+'" class="img-responsive lazy-img" alt="封面" style="width: 150px;height: 130px;"></a>' +
        '<span class="cat a-type"><a href="/list.html?typeId='+article.type.id+'">'+article.type.name+'</a></span>' +
        (article.top?'<span class="cat top" style="top:30px"><a>置顶</a></span>':'')+
        (article.recommended?'<span class="cat recommended" style="top:'+(article.top?'60':'30')+'px"><a>推荐</a></span>':'')+
        '</figure>' +
        '<header class="entry-header">' +
        '<h2 class="entry-title">' +
        '<a href="/article/'+article.id+'.html" rel="bookmark" title="点击查看文章详情" data-toggle="tooltip" data-placement="bottom">'+article.title+'</a>' +
        '</h2>' +
        '</header>' +
        '<div class="entry-content">' +
        '<div class="archive-content">' +
        article.description +
        '</div>' +
        '<span class="title-l"></span>' +
        '<div class="entry-meta">' +
        '<span class="date" title="文章发表日期" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-calendar-o fa-fw"></i>'+article.createTime+'</span>\n' +
        '<span class="views" title="文章阅读次数" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-eye fa-fw"></i>浏览('+article.lookCount+')</span>' +
        '<span class="loves" title="获赞次数" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-thumbs-up fa-fw"></i>赞('+article.loveCount+')</span>' +
        '<span class="comment" title="文章评论次数" data-toggle="tooltip" data-placement="bottom">' +
        '<a href="/article/'+article.id+'.html#comment-box" rel="external nofollow">' +
        '<i class="fa fa-comments-o fa-fw"></i>评论(<span class="comment_count" data-id="'+article.id+'"></span>)' +
        '</a>' +
        '</span>' +
        '<span>' +
        tagsHtml+
        '</span>'+
        '</div>' +
        '<div class="clear"></div>' +
        '<span class="entry-more">' +
        '<a href="/article/'+article.id+'.html" rel="bookmark" title="点击查看文章详情" data-toggle="tooltip" data-placement="bottom">阅读全文</a>' +
        '</span>' +
        '</div>' +
        '</article>';
}